<template>
    <div class="main_box" style="padding:10px">
        <div class="add_wrap">
            <el-form label-width="200px" v-if="dataInfo">
                <div class="tit">
                    <h2>基础信息</h2>
                    <el-button type="success" plain size="small" icon="fa fa-mail-forward"
                        @click="returnList">返回</el-button>
                </div>
                <el-row>
                    <el-form-item label="用户ID:">
                        <span>{{ dataInfo.userId }}</span>
                    </el-form-item>
                    <el-form-item label="用户信息修改类型:">
                        <span>{{ formatUpdateFlag(dataInfo.updateFlag) }}</span>
                    </el-form-item>
                    <el-form-item label="用户类型:">
                        <span>{{ formatUserType(dataInfo.userType) }}</span>
                    </el-form-item>
                    <el-form-item label="真实姓名:">
                        <span>{{ dataInfo.fullName }}</span>
                    </el-form-item>
                    <el-form-item label="手机号:">
                        <span>{{ dataInfo.phone }}</span>
                    </el-form-item>
                    <el-form-item label="身份证号:">
                        <span>{{ dataInfo.idCard }}</span>
                    </el-form-item>
                    <!-- <el-form-item label="(原账户信息ID:">
                        <span>{{ dataInfo.accountInfoId }}</span>
                    </el-form-item> -->
                    <!-- <el-form-item label="原账户信息:">
                        <span>{{dataInfo.originAccountJson }}</span>
                    </el-form-item>
                    <el-form-item label="原银行卡信息:">
                        <span>{{ dataInfo.originBankJson }}</span>
                    </el-form-item>
                    <el-form-item label="新账户信息:">
                        <span>{{ dataInfo.updateAccountJson }}</span>
                    </el-form-item>
                    <el-form-item label="新银行卡信息:">
                        <span>{{ dataInfo.updateBankJson }}</span>
                    </el-form-item> -->
                    <el-form-item label="审核状态:">
                        <el-tag size="mini" effect="dark" :type="formatCheckStates(dataInfo.checkState)">
                            {{ formatCheckState(dataInfo.checkState) }}
                        </el-tag>
                    </el-form-item>
                    <el-form-item label="审核失败的原因:">
                        <span>{{ dataInfo.checkReason }}</span>
                    </el-form-item>
                    <el-form-item label="审核人:">
                        <span>{{ dataInfo.checkUserName }}</span>
                    </el-form-item>
                    <el-form-item label="审核时间:">
                        <span>{{ dataInfo.checkDate }}</span>
                    </el-form-item>
                    <el-form-item label="创建时间:">
                        <span>{{ dataInfo.createDate }}</span>
                    </el-form-item>
                </el-row>
                <div class="tit" v-if="updateAccountJson">
                    <h2>新账户信息</h2>
                </div>
                <el-row v-if="updateAccountJson">
                    <el-form-item label="用户类型:">
                        <span>{{ formatUserType(updateAccountJson.userType) }}</span>
                    </el-form-item>
                    <el-form-item label="提现方式:">
                        <span>{{ updateAccountJson.cashType == 1 ? '自动提现' : '手动提现' }}</span>
                    </el-form-item>
                    <el-form-item label="真实姓名:">
                        <span>{{ updateAccountJson.fullName }}</span>
                    </el-form-item>
                    <el-form-item label="手机号:">
                        <span>{{ updateAccountJson.phone }}</span>
                    </el-form-item>

                    <template v-if="updateAccountJson.userType != 3">
                        <el-form-item label="企业商户名称:">
                            <span>{{ updateAccountJson.businessName }}</span>
                        </el-form-item>
                        <el-form-item label="企业联系人:">
                            <span>{{ updateAccountJson.linkName }}</span>
                        </el-form-item>
                        <el-form-item label="企业联系电话:">
                            <span>{{ updateAccountJson.linkPhone }}</span>
                        </el-form-item>
                        <el-form-item label="营业执照:">
                            <el-image style="width: 150px;" title="点击可预览" v-if="updateAccountJson.businessLicense"
                                :src="updateAccountJson.businessLicense" alt=""
                                :preview-src-list="[updateAccountJson.businessLicense]"></el-image>
                        </el-form-item>
                    </template>

                    <el-form-item label="身份证号:">
                        <span>{{ updateAccountJson.idCard }}</span>
                    </el-form-item>
                    <el-form-item label="身份证正面照:">
                        <el-image style="width: 150px;" title="点击可预览" v-if="updateAccountJson.idCardFront"
                            :src="updateAccountJson.idCardFront" alt=""
                            :preview-src-list="[updateAccountJson.idCardFront]"></el-image>
                    </el-form-item>
                    <el-form-item label="身份证反面照:">
                        <el-image style="width: 150px;" title="点击可预览" v-if="updateAccountJson.idCardBack"
                            :src="updateAccountJson.idCardBack" alt=""
                            :preview-src-list="[updateAccountJson.idCardBack]"></el-image>
                    </el-form-item>
                </el-row>

                <div class="tit" v-if="originAccountJson">
                    <h2>原账户信息</h2>
                </div>
                <el-row v-if="originAccountJson">
                    <el-form-item label="用户类型:">
                        <span>{{ formatUserType(originAccountJson.userType) }}</span>
                    </el-form-item>
                    <el-form-item label="提现方式:">
                        <span>{{ originAccountJson.cashType == 1 ? '自动提现' : '手动提现' }}</span>
                    </el-form-item>
                    <el-form-item label="真实姓名:">
                        <span>{{ originAccountJson.fullName }}</span>
                    </el-form-item>
                    <el-form-item label="手机号:">
                        <span>{{ originAccountJson.phone }}</span>
                    </el-form-item>
                    <template v-if="originAccountJson.userType != 3">
                        <el-form-item label="企业商户名称:">
                            <span>{{ originAccountJson.businessName }}</span>
                        </el-form-item>
                        <el-form-item label="企业联系人:">
                            <span>{{ originAccountJson.linkName }}</span>
                        </el-form-item>
                        <el-form-item label="企业联系电话:">
                            <span>{{ originAccountJson.linkPhone }}</span>
                        </el-form-item>
                        <el-form-item label="营业执照:">
                            <el-image style="width: 150px;" title="点击可预览" v-if="originAccountJson.businessLicense"
                                :src="originAccountJson.businessLicense" alt=""
                                :preview-src-list="[originAccountJson.businessLicense]"></el-image>
                        </el-form-item>
                    </template>
                    <el-form-item label="身份证号:">
                        <span>{{ originAccountJson.idCard }}</span>
                    </el-form-item>

                    <el-form-item label="身份证正面照:">
                        <el-image style="width: 150px;" title="点击可预览" v-if="originAccountJson.idCardFront"
                            :src="originAccountJson.idCardFront" alt=""
                            :preview-src-list="[originAccountJson.idCardFront]"></el-image>
                    </el-form-item>
                    <el-form-item label="身份证反面照:">
                        <el-image style="width: 150px;" title="点击可预览" v-if="originAccountJson.idCardBack"
                            :src="originAccountJson.idCardBack" alt=""
                            :preview-src-list="[originAccountJson.idCardBack]"></el-image>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import AccountCheckApi from '@/api/finance/accountCheck';

export default {
    data() {
        return {
            dataInfo: {},
            originAccountJson: null,
            originBankJson: null,
            updateAccountJson: null,
            updateBankJson: null,
        };
    },
    computed: {
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            AccountCheckApi.getAccountCheckInfo({ id: this.$route.query.id }).then(res => {
                let { originAccountJson, originBankJson, updateAccountJson, updateBankJson } = res.data
                this.originAccountJson = originAccountJson ? JSON.parse(originAccountJson) : null
                this.updateAccountJson = updateAccountJson ? JSON.parse(updateAccountJson) : null
                this.dataInfo = res.data
            })
        },
        formatUserType(cellValue) {
            if (cellValue === 1) {
                return '企业商户'
            } else if (cellValue === 2) {
                return '个体工商户'
            } else if (cellValue === 3) {
                return '个人'
            }
        },
        formatUpdateFlag(cellValue) {
            if (cellValue === 1) {
                return '新增账户信息'
            } else if (cellValue === 2) {
                return '修改账户信息'
            } else if (cellValue === 3) {
                return '更换结算卡'
            }
        },
        formatCheckState(cellValue) {
            if (cellValue === 0) {
                return '待审核'
            } else if (cellValue === 1) {
                return '审核成功'
            } else if (cellValue === 2) {
                return '审核失败'
            }
        },
        formatCheckStates(cellValue) {
            if (cellValue === 0) {
                return ''
            } else if (cellValue === 1) {
                return 'success'
            } else if (cellValue === 2) {
                return 'danger'
            }
        },
        returnList() {
            this.$store.dispatch('delView', this.$route);
            this.$router.push({ path: '/finance/accountCheckManagement' })
        }
    },

}

</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

<style lang="scss" scoped>
.img-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 3px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;

    .el-image {
        width: 100%;

        &::v-deep img {
            height: auto
        }
    }
}
</style>
